<template>
    <view class="list">
        <view class="items">
            <view class="label">认证方式</view>
            <view class="values">
                工牌/名牌/工作证等
                <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image>
            </view>
        </view>
        <view class="items">
            <view class="label">公司名称</view>
            <view class="inputs">
                <input v-model="inputVal.name" type="text" placeholder="输入完整公司名">
            </view>
        </view>
        <view class="items" @click="careerShow = true">
            <view class="label">在职职业</view>
            <view class="values ">
                <view class="flex-1 textleft" :style="inputVal.job ? 'color: #000;' : ''">
                    {{ inputVal.job ? jobName : '请选择职业' }}
                </view>
                <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image>
            </view>
        </view>
        <view class="items border0">
            <view class="label">上传图片：</view>
        </view>
        <view class="uploads">
            <view class="img" v-if="images != ''">
                <image :src="images" mode="aspectFill"></image>
                <u-icon class="del" @click="del()" name="close-circle-fill" color="rgba(0,0,0,.6)" size="34"></u-icon>
            </view>
            <u-upload v-else :custom-btn="true" :show-upload-list="false" ref="uUpload" :action="action"
                @on-change="imgChange">
                <view slot="addBtn" class="slot-btn" hover-stay-time="136">
                    <image class="uploads"
                        src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/publish/pic.png" mode="">
                    </image>
                </view>
            </u-upload>
        </view>
        <view class="submit">
            <view class="btns">
                <image class="btns-img"
                    src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/576x88.png" mode=""></image>
                <view class="btns-con" @click="submit()">
                    立即认证
                </view>
            </view>
        </view>
        <!-- 选择职业 -->
        <u-picker mode="selector" v-model="careerShow" @confirm="confirm" :range="careerList" range-key="name"></u-picker>
    </view>
</template>
<script>
import { API_URL } from '@/env'
export default {
    name: 'work',
    data() {
        return {
            action: '',
            inputVal: {
                type: 1, // 类型
                images: '', // 图片
                job: '', // 职位
                name: '' // 公司名称
            },
            jobName: '',
            images: [],

            careerShow: false,
            careerList: [],
        }
    },
    onLoad() {
        this.action = API_URL + 'Upload/file'
        this.$forceUpdate()
        this.getCareer()
    },
    onShow() {

    },
    methods: {
        // 提交 工作认证
        submit() {
            if(this.inputVal.name == ''){
                this.$utils.toast('请输入公司名称')
                return
            }
            if(this.inputVal.job == ''){
                this.$utils.toast('请选择职业')
                return
            }
            if(this.images == ''){
                this.$utils.toast('请上传图片')
                return
            }

            this.inputVal.images = this.images
            console.log(this.inputVal, 'inputVal')
            this.$http('real.workReal', this.inputVal).then(res => {
                console.log(res, 'res')
                if (res.code == 1) {
                    this.$utils.toast('提交审核')
                    // this.$router.push('/pages/mine/attestation/attestation')
                    // pages/mine/mine-identify/mine-identify
                } else {
                    this.$utils.toast(res.msg)
                }
            })
        },
        // 选择职业
        confirm(e) {
            console.log(e, 'e')
            this.careerList.filter((item, index) => {
                if (index == e[0]) {
                    this.jobName = item.name
                    this.inputVal.job = item.id
                    return true;
                }
            })
            this.careerShow = false
        },
        // 获取职业
        getCareer() {
            this.$http('config.Industry').then(res => {
                console.log(res, 'res')
                if (res.code == 1) {
                    this.careerList = res.data
                }
            })
        },
        // 删除图片
        del(index) {
            // this.imgList.splice(index, 1)
            this.images = ''
        },
        // 上传成功
        imgChange(data) {
            // console.log(JSON.parse(data.data), 'data.data')
            // this.imgList.push(JSON.parse(data.data).data)
            this.images = JSON.parse(data.data).data
        },
    },
}
</script>
<style lang="scss" scoped>
.uploads {
    .slot-btn {
        width: 136rpx;
        height: 136rpx;
    }

    .img {
        height: 136rpx;
        width: 136rpx;
        position: relative;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
    }

    image {
        border-radius: 16rpx;
        height: 100%;
        width: 100%;
        display: block;
    }

    .del {
        position: absolute;
        top: 12rpx;
        right: 12rpx;
    }
}

.list {
    padding: 0 32rpx;
}

.column {
    flex-direction: column;
}

.border0 {
    border: 0 !important;
}

.items {
    border-bottom: 1rpx solid #F5F5F5;
    padding: 40rpx 0;
    display: flex;
    align-items: center;
}

.label {
    margin-right: 60rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #2E3033;
}

.values {
    flex: 1;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #8A9199;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    image {
        margin-left: 16rpx;
        width: 40rpx;
        height: 40rpx;
        display: block;
    }
}

.inputs {
    flex: 1;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #8A9199;

    input {
        width: 100%;
        text-align: left;
    }
}

.textleft {
    text-align: left;
}

.submit {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(40rpx + constant(safe-area-inset-bottom));
    bottom: calc(40rpx + env(safe-area-inset-bottom));

    .btns {
        margin: 0 auto;
        width: 576rpx;
        height: 88rpx;
        position: relative;

        &-img {
            width: 100%;
            height: 100%;
        }

        &-con {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FAFCFF;
            line-height: 88rpx;
            text-align: center;
        }
    }
}
</style>